<template>
  <div class="examine-detail">
    <el-card shadow="never">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
        <h2> {{ $route.query.isExamine === 'newBuild' ? '新建供应商' : '基本信息' }}</h2>
        <el-form-item v-if="$route.query.isExamine !== 'newBuild'" label="审核状态：">
          <span :class="[detailData.auditStatus === 0 ? 'audit' : 'audited']"> {{ detailData.auditStatus === 0 ? '待审核' : '已审核' }}</span>
        </el-form-item>
        <el-form-item label="供应商名称" prop="providerName">
          <el-input v-model="ruleForm.providerName" />
        </el-form-item>
        <el-form-item label="负责人" prop="principal">
          <el-input v-model="ruleForm.principal" />
        </el-form-item>
        <el-form-item label="负责人电话" prop="principalTel">
          <el-input v-model="ruleForm.principalTel" />
        </el-form-item>
        <el-form-item label="公司地址" prop="address">
          <el-input v-model="ruleForm.address" />
        </el-form-item>
        <el-form-item label="营业执照" required>
          <UpLoadImags ref="upLoadImages" :limit="1" :disabled="false" :tips="'只能上传jpg/png文件，且不超过5MB'" :file-list="imgList" />
        </el-form-item>
        <el-form-item label="供应商简介" prop="description">
          <el-input v-model="ruleForm.description" type="textarea" />
        </el-form-item>
        <el-form-item label="分润比例" prop="profitScale">
          <el-input v-model="ruleForm.profitScale" /><span class="tips">%</span>
        </el-form-item>

        <el-table
          v-if="$route.query.isExamine !== 'newBuild'"
          :data="detailData.providerAuditLog"
          stripe
          :header-cell-style="{background:'#f2f3f5',color:'#606266'}"
          class="table-data"
        >
          <el-table-column prop="auditStatus" label="审核意见" align="center" :show-overflow-tooltip="true" min-width="150">
            <template slot-scope="scope">
              <span> {{ auditStatusMap[scope.row.auditStatus] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="审核人" align="center" :show-overflow-tooltip="true" min-width="150" />
          <el-table-column prop="operateTime" label="审核时间" align="center" :show-overflow-tooltip="true" min-width="180">
            <template slot-scope="scope">
              <span> {{ formatTimes(scope.row.operateTime,"YYYY/MM/DD hh:mm:ss") }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="rejectReason" label="驳回原因" align="center" :show-overflow-tooltip="true" min-width="150" />
          <el-table-column prop="remark" label="备注信息" align="center" :show-overflow-tooltip="true" min-width="150" />
        </el-table>
        <el-form-item v-if="$route.query.isExamine !== 'newBuild'" label="审核意见" prop="auditStatusValue">
          <el-radio-group v-model="ruleForm.auditStatusValue" :disabled="!$route.query.isExamine">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="ruleForm.auditStatusValue == 2" label="驳回原因" prop="region">
          <el-select v-model="ruleForm.rejectReason" placeholder="请选择驳回原因" :disabled="!$route.query.isExamine">
            <el-option v-for="item in rejectReasonData" :key="item.value" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="ruleForm.auditStatusValue == 2" label="备注信息" prop="desc">
          <el-input
            v-model="ruleForm.remark"
            type="textarea"
            placeholder="请填写备注信息"
            maxlength="200"
            show-word-limit
            :disabled="!$route.query.isExamine"
          />
        </el-form-item>
      </el-form>
    </el-card>
    <el-card v-if="$route.query.isExamine" shadow="never" class="card-bottom">
      <div class="bottom-btn">
        <el-button @click="goBack()">返 回</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import UpLoadImags from '@/components/upLoadImags'
import { accessSave, getProviderDetail, providerAuditPrepare } from '@/api/supplier'
import { formatTimes } from '@/utils'
import { rejectReasonData, auditStatusMap } from './common'
export default {
  components: {
    UpLoadImags
  },
  data() {
    return {
      rejectReasonData,
      auditStatusMap,
      ruleForm: {},
      detailData: {},
      formatTimes,
      imgList: [],
      rules: {
        providerName: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }],
        principal: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
        principalTel: [{ required: true, message: '请输入负责人电话', trigger: 'blur' }],
        address: [{ required: true, message: '请输入公司地址', trigger: 'blur' }],
        description: [{ required: true, message: '请输入供应商简介', trigger: 'blur' }],
        profitScale: [{ required: true, message: '请输入供应商简介', trigger: 'blur' }],
        auditStatusValue: [{ required: true, message: '请选择审核意见', trigger: 'change' }],
        rejectReason: [{ required: true, message: '请选择驳回原因', trigger: 'change' }],
        remark: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getProviderDetail()
  },
  methods: {
    // 获取审核详情
    async getProviderDetail() {
      if (this.$route.query.id) {
        try {
          const res = await getProviderDetail({ accessProviderId: this.$route.query.id })
          this.detailData = res
          this.ruleForm = { ...res, ...this.ruleForm }
          // 图片回显
          this.imgList = [{
            name: '图片',
            url: res.attachUrl
          }]
          if (!this.$route.query.isExamine) {
            this.ruleForm.auditStatusValue = res.auditStatus
          }
        } catch (error) {
          console.log(error)
        }
      }
    },
    // 确定按钮功能
    async submitForm() {
      if (process.env.VUE_APP_PACKAGE === 'externalize') {
        try {
          await this.$confirm('亲，这是演示版，你没有权限!,想获得所有权限，请联系咨询老师，获取代码', '系统提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
        } catch (error) {
          console.log(error)
        }
        return
      }
      this.$refs['ruleForm'].validate(async(valid) => {
        if (valid) {
          console.log(this.$route.query.isExamine)
          if (this.$route.query.isExamine == 'newBuild') {
            const image = this.$refs.upLoadImages.imgUrl
            if (image.length <= 0) {
              return this.$message.error('请上传营业执照')
            }
            const parmas = {
              ...this.ruleForm,
              attachId: image[0].id
            }
            await accessSave(parmas)
            this.$message.success('新建成功')
            this.$router.go(-1)
          } else if (this.$route.query.isExamine) {
            const parmas = {
              providerId: this.$route.query.id,
              auditStatus: this.ruleForm.auditStatusValue
            }
            if (this.ruleForm.auditStatusValue === 2) {
              parmas.rejectReason = this.ruleForm.rejectReason
              parmas.remark = this.ruleForm.remark
            }
            await providerAuditPrepare(parmas)
            this.$message.success('审批成功')
            this.$router.go(-1)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 返回到上一页面
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
.examine-detail{
  .table-data{
    margin-bottom: 25px;
  }
  .audit{
    color: #e6a23c;
  }
  .audited{
    color: #67c23a;
  }
  .el-input{
    width: 360px;
  }
  .el-textarea{
    width: 360px;
  }
  .el-select{
    width: 360px;
  }
  .tips{
    margin-left: 10px;
    color: #c0c4cc;
  }
  .card-bottom{
    margin-top: 15px;
    .bottom-btn{
      text-align: center;
    }
  }
}

</style>
